import { Metadata } from 'next'
import Link from 'next/link'
import { blogPosts, blogPostComponents } from '../blogPosts'

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = blogPosts.find(p => p.slug === params.slug)
  if (!post) {
    return {
      title: 'Post Not Found - Bookwiz Blog',
      description: 'The requested blog post could not be found.',
    }
  }
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
    },
  }
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = blogPosts.find(p => p.slug === params.slug)
  if (!post) {
    return (
      <div className="max-w-2xl mx-auto px-4 py-16">
        <h1 className="text-2xl font-medium text-white">Post not found</h1>
        <Link href="/blog" className="text-teal-400 mt-4 inline-block">
          Back to blog
        </Link>
      </div>
    )
  }

  const PostComponent = (await blogPostComponents[params.slug]?.())?.default

  if (!PostComponent) {
    return (
      <div className="max-w-2xl mx-auto px-4 py-16">
        <h1 className="text-2xl font-medium text-white">Post not found</h1>
        <Link href="/blog" className="text-teal-400 mt-4 inline-block">
          Back to blog
        </Link>
      </div>
    )
  }

  return <PostComponent />
}